<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/view/include/taglib.jsp"%>
<html>
<head>
    <title>登录页面</title>
</head>
<body>

<form action="${ctx}/login" method="post">
    <input type="text" name="loginName">
    <input type="password" name="password">
    <input type="submit" value="登录">
</form>
<h2>####################################################</h2>
<span id="btn">click me</span>
<h2>####################################################</h2>
<div id="app">
    <input type="text" v-model="loginName" placeholder="请输入用户名">
    <input type="password" v-model="password" placeholder="请输入用户密码">
    <button v-on:click="login">登录</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(function () {
        $('#btn').click(function () {
            $.post('${ctx}/login', {
                loginName: 'jquery',
                password: '123456'
            }, function (data) {
                console.log(data);
            });
        });
    });
</script>
<script>
    new Vue({
        el: '#app',
        data: {
            loginName: '',
            password: ''
        },
        methods: {
            login: function (event) {
                alert('login name: ' + this.loginName + ', password: ' + this.password)
                axios.post('${ctx}/login', {
                    loginName: 'wangguocheng',
                    password: 'helloworld'
                }).then(function (response) {
                    console.log(response);
                })

            }
        }
    })
</script>
</body>
</html>
